<template>
  <div class="water-protection-page">
    <!-- 推荐活动轮播图 -->
    <el-card class="activity-carousel-card">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in recommendedActivities" :key="item.id">
          <div class="carousel-content">
            <img :src="item.image" alt="活动图片" class="carousel-image" />
            <div class="overlay">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
              <span class="date">{{ item.date }}</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="carousel-header">
        <h2>推荐护水行动</h2>
      </div>
    </el-card>

    <!-- 护水行动列表 -->
    <el-card class="water-activities-list">
      <template #header>
        <div class="card-header">
          <span>最新护水行动</span>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="8" v-for="activity in waterActivities" :key="activity.id">
          <el-card shadow="hover" class="activity-card">
            <img :src="activity.image" class="activity-image" />
            <div class="activity-info">
              <h3>{{ activity.title }}</h3>
              <p class="time">时间：{{ activity.time }}</p>
              <p class="location">地点：{{ activity.location }}</p>
              <p class="desc">{{ activity.desc }}</p>
              <el-button
                v-if="activity.type === 'quiz'"
                type="success"
                size="small"
                @click="openQuizDialog(activity)"
              >
                开始答题
              </el-button>
              <el-button
                v-else
                type="primary"
                size="small"
                @click="openParticipationDialog(activity)"
              >
                立即参与
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 参与对话框 (非答题类) -->
    <el-dialog
      v-model="participationDialogVisible"
      title="参与护水行动"
      width="500px"
    >
      <el-form
        ref="participationFormRef"
        :model="participationForm"
        :rules="participationRules"
        label-width="100px"
      >
        <el-form-item label="活动名称">
          <span>{{ selectedActivity?.title }}</span>
        </el-form-item>
        <el-form-item label="活动时间">
          <span>{{ selectedActivity?.time }}</span>
        </el-form-item>
        <el-form-item label="您的姓名" prop="name">
          <el-input v-model="participationForm.name" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="participationForm.phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="participationDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitParticipation">确认参与</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 答题对话框 -->
    <el-dialog
      v-model="quizDialogVisible"
      title="护水知识问答"
      width="600px"
    >
      <div v-if="!quizCompleted">
        <div v-for="(question, index) in quizQuestions" :key="question.id" class="quiz-question">
          <p class="question-text">题目{{ index + 1 }}：{{ question.question }} ({{ question.score }}分)</p>
          <el-radio-group v-model="userAnswers[question.id]">
            <el-radio v-for="option in question.options" :key="option.value" :label="option.value">
              {{ option.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <el-button type="primary" @click="submitQuiz" class="submit-quiz-button">提交答卷</el-button>
      </div>
      <div v-else class="quiz-result">
        <h2>答题完成！</h2>
        <p>您的得分为：<span :style="{ color: quizScore >= 70 ? '#67C23A' : '#F56C6C' }">{{ quizScore }}</span> 分</p>
        <p v-if="quizScore >= 70" class="credit-message">
          恭喜您！由于得分超过70分，已为您添加信用分。
        </p>
        <p v-else class="credit-message">
          很遗憾，您的得分未达到信用分奖励标准，请继续努力！
        </p>
        <el-button type="primary" @click="quizDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const participationDialogVisible = ref(false)
const quizDialogVisible = ref(false)
const selectedActivity = ref(null)
const participationFormRef = ref(null)
const participationForm = ref({
  name: '',
  phone: '',
})

const participationRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
}

const quizQuestions = ref([
  {
    id: 1,
    question: '在日常生活中，下列哪项行为有助于节约用水？',
    options: [
      { label: 'A. 洗澡时使用淋浴而不是浴缸', value: 'A' },
      { label: 'B. 刷牙时不关水龙头', value: 'B' },
      { label: 'C. 用洗衣机洗少量衣物', value: 'C' },
      { label: 'D. 用大量水冲洗汽车', value: 'D' },
    ],
    answer: 'A',
    score: 25,
  },
  {
    id: 2,
    question: '下列哪种做法可以有效减少水污染？',
    options: [
      { label: 'A. 将生活污水直接排放到河流中', value: 'A' },
      { label: 'B. 使用无磷洗衣粉', value: 'B' },
      { label: 'C. 在河边丢弃垃圾', value: 'C' },
      { label: 'D. 在湖泊中使用农药', value: 'D' },
    ],
    answer: 'B',
    score: 25,
  },
  {
    id: 3,
    question: '在水资源保护中，以下哪项措施是不必要的？',
    options: [
      { label: 'A. 建立污水处理厂', value: 'A' },
      { label: 'B. 推广节水型农业技术', value: 'B' },
      { label: 'C. 随意排放工业废水', value: 'C' },
      { label: 'D. 实施雨水收集系统', value: 'D' },
    ],
    answer: 'C',
    score: 25,
  },
  {
    id: 4,
    question: '判断题：所有的工业废水都可以经过处理后安全排放到河流中。',
    options: [
      { label: 'A. 正确', value: 'A' },
      { label: 'B. 错误', value: 'B' },
    ],
    answer: 'B',
    score: 25,
  },
])
const userAnswers = ref({})
const quizScore = ref(0)
const quizCompleted = ref(false)

// 模拟推荐活动数据
const recommendedActivities = ref([
  {
    id: 1,
    title: '“节水护水，你我同行”知识竞赛',
    description: '参与知识竞赛，检验你的护水知识，赢取丰厚奖品！',
    image: 'https://picsum.photos/id/40/800/300',
    date: '2025.07.01 - 2025.07.31'
  },
  {
    id: 2,
    title: '河道清洁志愿者招募',
    description: '加入我们，一起清理河道垃圾，守护碧水蓝天。',
    image: 'https://picsum.photos/id/42/800/300',
    date: '每周六上午'
  },
  {
    id: 3,
    title: '节水金点子征集',
    description: '分享你的节水妙招，让更多人参与到节水行动中来。',
    image: 'https://picsum.photos/id/43/800/300',
    date: '2025.08.01 - 2025.08.31'
  },
  {
    id: 4,
    title: '水质监测体验营',
    description: '亲身体验水质监测过程，了解水环境健康状况。',
    image: 'https://picsum.photos/id/44/800/300',
    date: '2025.09.10'
  }
])

// 模拟护水行动活动数据
const waterActivities = ref([
  {
    id: 101,
    title: '社区节水宣传日',
    time: '2025-07-25 10:00-12:00',
    location: '小区广场',
    desc: '向社区居民普及节水知识，发放节水宣传册。',
    image: 'https://picsum.photos/id/45/300/200',
    type: 'general' // general type for participation
  },
  {
    id: 102,
    title: '水资源保护知识问答',
    time: '线上进行',
    location: '线上平台',
    desc: '参与答题，检验你的水知识水平。',
    image: 'https://picsum.photos/id/46/300/200',
    type: 'quiz' // quiz type for quiz dialog
  },
  {
    id: 103,
    title: '河岸清洁志愿活动',
    time: '2025-08-01 09:00-16:00',
    location: '环城河沿岸',
    desc: '清理河岸垃圾，美化水环境。',
    image: 'https://fakeimg.pl/300x200/20b2aa,128/ffffff,128/?text=River%20Clean%20Up',
    type: 'general'
  },
  {
    id: 104,
    title: '家庭节水小妙招分享会',
    time: '2025-08-15 19:00-21:00',
    location: '社区活动中心',
    desc: '邀请节水达人分享家庭节水小技巧。',
    image: 'https://fakeimg.pl/300x200/6a5acd,128/ffffff,128/?text=Water%20Tips%20Share',
    type: 'general'
  }
])

const openParticipationDialog = (activity) => {
  selectedActivity.value = activity
  Object.assign(participationForm.value, {
    name: '',
    phone: '',
  })
  participationDialogVisible.value = true
}

const submitParticipation = async () => {
  try {
    await participationFormRef.value.validate()
    ElMessage.success(`成功参与活动：${selectedActivity.value.title}，参与人：${participationForm.value.name}，电话：${participationForm.value.phone}`)
    participationDialogVisible.value = false
  } catch (error) {
    ElMessage.error('参与失败，请检查表单填写')
  }
}

const openQuizDialog = (activity) => {
  selectedActivity.value = activity
  userAnswers.value = {} // Reset answers
  quizScore.value = 0 // Reset score
  quizCompleted.value = false // Reset completion status
  quizDialogVisible.value = true
}

const submitQuiz = () => {
  let score = 0
  quizQuestions.value.forEach(q => {
    if (userAnswers.value[q.id] === q.answer) {
      score += q.score
    }
  })
  quizScore.value = score
  quizCompleted.value = true

  if (score >= 70) {
    // 模拟添加信用分
    ElMessage.success('恭喜您，答题通过！已为您添加信用分。')
    console.log('模拟添加信用分...')
  } else {
    ElMessage.warning('答题未通过，请再接再厉。')
  }
}

onMounted(() => {
  // 可以在这里加载真实的活动数据
})
</script>

<style scoped>
.water-protection-page {
  padding: 20px;
  background-color: #f0f2f5;
}

.activity-carousel-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.carousel-header {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  padding: 20px;
  color: #fff;
}

.overlay h3 {
  margin-top: 0;
  margin-bottom: 5px;
}

.overlay p {
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay .date {
  font-size: 12px;
  opacity: 0.8;
}

.water-activities-list {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.activity-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.activity-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.activity-info {
  padding: 15px;
  text-align: left;
}

.activity-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
}

.activity-info p {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}

.submit-quiz-button {
  margin-top: 20px;
  width: 100%;
}

.quiz-question {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.quiz-question:last-child {
  border-bottom: none;
}

.question-text {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.el-radio-group {
  display: flex;
  flex-direction: column;
}

.el-radio {
  margin-bottom: 5px;
}

.quiz-result {
  text-align: center;
  padding: 20px;
}

.quiz-result h2 {
  color: #333;
  margin-bottom: 15px;
}

.quiz-result p {
  font-size: 16px;
  margin-bottom: 10px;
}

.credit-message {
  font-weight: bold;
}
</style> 